<template>
  <div class="homePage scrollStyle">
    <header class="rcs-content-head">
      <div class="page-loge-bg"></div>
      <nav class="rcs-content-nav">
        <ul class="nav-router-list clearfix">
          <li v-for="(v,i) in menuData" :key="i" :class="$store.state.menuIndex==i?'active':''" @click="menulistClick(v,i)">
            <i class="iconfont" :class="v.icon"></i>
            <span>{{v.name}}</span>
          </li>
        </ul>
      </nav>
      <!-- <div class="badgeBox">
            <span class="iconfont icon-xiaoxi">
                <i>8</i>
            </span>
        <span @click="warningReminder = true;" class="iconfont icon-baojing">
                <i>8</i>
        </span>
      </div> -->
      <div class="page-user-info" @mouseenter="showmenuBox=true" @mouseleave="showmenuBox=false">
        <div class="user-info-wrap">
          <div class="head-portrait-wrap">
            <img src="../../assets/images/userIcon.png"/>
          </div>
          <div class="user-base-info" @click="false">
            <span class="user-name">{{userName}}</span>
            <span class="user-position">{{userZw}}</span>
          </div>
          <transition name="el-zoom-in-top">
            <div class="closeBox transition-box" v-show="showmenuBox">
              <!--<p @click="personVisible = true">个人信息</p>-->
              <p>退出登录</p>
            </div>
          </transition>
        </div>
      </div>
    </header>

    <section>
      <div class="navBox" v-if="$store.state.levMenudata.length != 0">
        <div class="oneLevnav">
          <p>
            <span class="tl"></span>
            <span class="tr"></span>
            {{$store.state.navTitle}}</p>
          <div class="menu" v-for="(item,key) in $store.state.levMenudata" :key="key" :class="$store.state.levmenuIndex == key?'levmenuActive':''"  @click="goRouter(item,key)"  @mouseenter="levmenuHover(item,key)" @mouseleave='menuOut'>
            <!-- <img :src="item.imgActive" alt="" v-if="levmenuIndex == key"> -->
            <i :style="styleFun(item.img)"></i>
            <p :title="item.name">{{item.name}}</p>

          </div>
          <div class="menu-dropright" :class="menushow?'showMenu':''" @mouseleave="mouseLeave($event)">
            <!-- <div class="titlebox">
                  {{levMenudata.name}}
            </div> -->
            <el-scrollbar style="height:calc(100% - 51px)">
              <div class="twoLevnav">
                <div class="twoTitle">
                  <p>{{thrMenudata.name}}</p>
                  <!-- <i class="el-icon-arrow-down" :class="levMenudata.show?'rotateClass':''"></i> -->
                </div>
                <ul>
                  <li v-for="(item1,key) in thrMenudata.children" :key="key" :class="$store.state.childMenu == item1.path?'currentLi':''" @click.stop="goChildrouter(item1)">
                    <span></span>
                    {{item1.name}}
                  </li>
                </ul>

              </div>
            </el-scrollbar>
          </div>
          <div class="openTree" @click="openTree" v-show="opentreeshow">
            <i></i>
            <p>站点选择</p>
          </div>
          <!-- <button @click="kq" v-show="!this.$store.state.showleftTree">kaiqi</button> -->
        </div>
      </div>
      <!-- <div class="leftTree_box" v-if="this.$store.state.showleftTree">
            <yf-tree  :treeConfig='treeConfig'></yf-tree>
      </div>  -->
      <div class="rightContent_box" :class="$store.state.levMenudata.length == 0?'fillFull':''">
        <div class="curAddre" v-if="tabNavone[0].name != 'GIS一张图'">
          <i class="icon-shouye iconfont"></i>    当前位置：<span v-for="(item,key) in tabNavone" :key='key'> {{item.name}} <i v-if='key != tabNavone.length-1' class="el-icon-arrow-right"></i></span><div v-if="stationName != '' && showCheckbox && !this.$route.meta.noStationcode">【<span>{{stationName}}</span>】</div><div v-if="stationName != '' && !showCheckbox && !this.$route.meta.noStationcode">【<span :title="stationNames">{{stationName}}</span><span v-if="stationNum>1">...</span>】</div>
        </div>
        <div class="rightBody" :class="tabNavone[0].name != 'GIS一张图'?'':'fullHeight'">
          <div  class="treeBox" v-show="detailTree">
            <div class="treebody">
              <div class="treeTool clearfix">
                <el-input placeholder="关键字" suffix-icon="el-icon-search" v-model="filter"></el-input>
                <span><i class="iconfont icon-shaixuan"></i></span>
              </div>
              <ul class="clearfix treenav">
                <li v-for="(item,key) in treeNav" :key="key" :class="treeNavindex==key?'current':''" @click="treeNavclick(item,key)">{{item.name}}</li>
              </ul>
              <div style="width:100%;height:calc(100% - 62px)" class="treescroll" v-show="showCheckbox">
                <el-scrollbar style="height:100%;">
                  <div class="tree_content singleTree" style="padding:12px;width:280px"  >
                    <el-tree :data="treeData"
                             :indent="23"
                             node-key="nodeId"
                             ref="tree"
                             @node-click='treeNodeclick'
                             :default-expanded-keys="defaultId"
                             :filter-node-method="filterNode"
                             highlight-current
                             accordion
                             :class="treeData.length==1?'noBr':''"
                             :props="defaultProps">
                                            <span class="custom-tree-node" slot-scope="{node,data}">
                                              <span> <i class="iconCode" :class="data.structureType == '0'?'sf':data.structureType == '1'?'sf':data.structureType == '2'?'city':data.networking===1?'station':'offlinestation'"></i>

                                              {{ node.label }}

                                                <!-- <span v-show="data.enabled === 0">(不建)</span> -->
                                                <i v-show="data.enabled == 1 && data.structureType == 3" class="exam"></i>
                                                <i v-show="data.monitorStatus == 1 && data.structureType == 3" class="camera"></i>
                                              </span>
                                            </span>
                    </el-tree>

                  </div>
                </el-scrollbar>
              </div>
              <div style="width:100%;height:calc(100% - 62px)" class="treescroll" v-show="!showCheckbox">
                <el-scrollbar style="height:100%">
                  <div class="tree_content" style="padding:12px;width:280px">

                    <el-tree :data="treeData"
                             :indent="23"
                             node-key="nodeId"
                             ref="checkedTree"
                             @check='treeCheckchange'
                             :default-expanded-keys="defaultId"
                             default-expand-all
                             :filter-node-method="filterNode"
                             highlight-current
                             accordion
                             show-checkbox
                             :class="treeData.length==1?'noBr':''"
                             :props="defaultProps">
                                              <span class="custom-tree-node" slot-scope="{node,data}">
                                                <span> <i class="iconCode" :class="data.structureType == '0'?'sf':data.structureType == '1'?'sf':data.structureType == '2'?'city':data.networking===1?'station':'offlinestation'"></i>
                                                  {{ node.label }}
                                                  <!-- <span v-show="data.enabled === 0">(不建)</span> -->
                                                  <i v-show="data.enabled == 1 && data.structureType == 3" class="exam"></i>
                                                  <i v-show="data.monitorStatus == 1 && data.structureType == 3" class="camera"></i>
                                                </span>
                                              </span>

                    </el-tree>

                  </div>
                </el-scrollbar>
              </div>
            </div>
            <div class="closeBtn" @click="closeTree">
              <i></i>
            </div>
          </div>
          <div class="briefBox" v-show="allStatus == 'statusA'">
            
            <div style="height:100%">
              <el-scrollbar style="height:100%">

              
                  <div class="inputbox" @click="openMidtree">
              <input type="text">
              <i class="iconfont icon-sousuo"></i>
            </div>
            <p>当前站点</p>
            <div class="ulbox">
              <i class="iconfont icon-lefticon" @click="stationLeft"></i>
              <i class="iconfont icon-righticon" @click="stationRight"></i>
              <div class="gdbox">
                <ul class="clearfix" v-bind:style="{left: -staionPos + 'px' }">
                  <li v-for="(item,key) in this.$store.state.stationInfo" :key="key">{{item.nodeName}}</li>
                </ul>
              </div>
              <div>{{stationCode+1}}/{{this.$store.state.stationInfo.length}}</div>
            </div>
            <!-- <div class="stationdetail">
              <span class="tl"></span>
              <span class="tr"></span>
              <ul>
                <li>
                  <p>站点总数</p>
                  <p>260</p>
                </li>
                <li>
                  <p>在线数</p>
                  <p style="color:#36c25e">120</p>
                </li>
                <li>
                  <p>异常数</p>
                  <p style="color:#ff3333">30</p>
                </li>
                <li>
                  <p>离线数</p>
                  <p>110</p>
                </li>
              </ul>
            </div> -->
            </el-scrollbar>
            </div>
            <div class="closeBtn" @click="openMidtree">
              <i></i>
            </div>
           
          </div>
          <div class="mainbox" :class="{'fullFull':allStatus=='statusB','midFull':allStatus=='statusA'}">
            <router-view/>
          </div>
        </div>
      </div>
    </section>

    <!-- 预警提醒 -->
    <el-dialog
      custom-class="no-padding-dialog"
      title="预警提醒"
      width="930px"
      :visible.sync="warningReminder">
      <warningReminder></warningReminder>
    </el-dialog>
  </div>
</template>

<script>
  import getInfo from "../../axios/main";
  import  warningReminder from "./warningReminder"
  var treedataone = [];
  var treedatatwo = [];
  export default {
    name: "HelloWorld",
    components:{
      warningReminder
    },
    data() {
      return {
        warningReminder: false,
        opentreeshow: false,
        filter:'',
        haveTree: false,
        detailTree: false,
        staionPos: 0,
        stationCode: 0,
        radio: 0,
        showCheckbox: true,
        defaultProps: {
          children: "children",
          label: "nodeName"
        },
        treeConfig: {
          showCheckbox: true
        },
        treeData: [],
        navTitle: "",
        userName: "admin",
        userZw: "系统管理员",
        showmenuBox: false,
        menushow: false,
        // menuIndex: 0, //1级菜单选中状态控制
        // levmenuIndex: 0, //2级菜单选中状态控制
        menuCode: 0,
        treeNavindex: 0,
        //childMenu: "", //子路由选中状态控制
        tabNavone: [],
        menuData: [
          {
            path: "/gismap",
            name: "GIS一张图",
            icon: "icon-GISyizhangtu"
          },
          {
            path: "",
            name: "数据采集",
            icon: "icon-shujucaiji",
            children: [
              {
                name: "数据汇总",
                img: "./static/images/j_shujuhuizong_icon.png",
                children: [
                  // {
                  //  path: "/dataCollection/dataAggre/alarmManage",
                  //  name: "报警管理"
                  // },
                  //{
                  //  path: "/dataCollection/dataAggre/NetworkStatistics",
                  //  name: "联网统计"
                  //},
                  {
                    path: "/dataCollection/dataAggre/currentData",
                    name: "实时数据"
                  },
                  {
                    path: "/dataCollection/dataAggre/minuteData",
                    name: "分钟数据"
                  },
                  {
                    path: "/dataCollection/dataAggre/historyData",
                    name: "历史数据"
                  },
                  
                  //{
                  //  path: "/dataCollection/dataAggre/manuMonitor",
                  //  name: "手工监测"
                 // },
                  //{
                  //  path: "/dataCollection/dataAggre/remoteMaint",
                  //  name: "远程维护"
                  //}
                ]
              },
              // {
              //   name: "通讯管理",
              //   img: "./static/images/j_tongxunguanli_icon.png",
              //   children: [
              //     {
              //       path: "/dataCollection/commanage/trafficAnalysis",
              //       name: "联网通讯分析"
              //     },
              //     {
              //       path: "/dataCollection/commanage/singleTrafficAnalysis",
              //       name: "单站联网通讯分析"
              //     }
              //   ]
              // }
              // {
              //   name: "视频监控",
              //   children: [
              //     {
              //       path: "/dataCollection/realtimeVideo",
              //       name: "实时视频"
              //     }
              //   ]
              // }
            ]
          },
          {
            path: "",
            name: "质量控制",
            icon: "icon-zhiliangkongzhi",
            children: [
              {
                name: "测试数据",
                img: "./static/images/z_ceshishuju_icon.png",
                show: false,
                children: [
                  //{
                  //  path: "/qualityControl/testdata/zeroDrift",
                  //  name: "24小时零点漂移"
                  //},
                  //{
                  //  path: "/qualityControl/testdata/spanDrift",
                  //  name: "24小时跨度漂移"
                  //},
                  {
                   path: "/qualityControl/testdata/paramverifi",
                   name: "常规五参数周核查"
                  },
                  //{
                  //  path: "/qualityControl/testdata/contrastTest",
                  //  name: "自动与手工比对测试"
                  //},
                  //{
                  //  path: "/qualityControl/testdata/linearVerifi",
                  //  name: "多点线性核查"
                  //},
                  // {
                  // path: "/qualityControl/testdata/sampleComparison",
                  //  name: "实际水样比对"
                  // },
                  //{
                  //  path: "/qualityControl/testdata/intervenExami",
                  //  name: "集成干预检查"
                  //},
                  {
                    path: "/qualityControl/testdata/zeroSpanCheck",
                    name: "零点和量程核查"
                  },
                  {
                    path: "/qualityControl/testdata/zeroDriftVerification",
                    name: "24小时零点量程漂移"
                  },
                  {
                    path: "/qualityControl/testdata/rateRecovery",
                    name: "加标回收率"
                  },
                  {
                    path: "/qualityControl/testdata/verifiDdata",
                    name: "标样核查数据"
                  },
                   {
                    path: "/qualityControl/testdata/sampleVerification",
                    name: "样品核查"
                  },
                  {
                    path: "/qualityControl/testdata/realWaterComparison",
                    name: "实际水样比对"
                  },
                  {
                    path: "/qualityControl/testdata/logParam",
                    name: "日志及状态量参数"
                  },
                  
                ]
              },
              {
                name: "质控设置",
                show: false,
                img: "./static/images/z_zhikongshezi_icon.png",

                children: [
                  {
                    path: "/qualityControl/quaset/dayqualitycontrolSet",
                    name: "日质控设置"
                  },
                  {
                    path: "/qualityControl/quaset/weekqualitycontrolSet",
                    name: "周质控设置"
                  },
                  {
                    path: "/qualityControl/quaset/mousequalitycontrolSet",
                    name: "月质控设置"
                  },
                  {
                     path: '/qualityControl/quaset/setParams',
                    name: '设置参数',
                  }
                ]
              },
              {
                name: "远程设置",
                img: "./static/images/z_yuanchengshezi_icon.png",
                show: false,
                children: [
                  {
                    path: "/qualityControl/yccontrol/cuntercontrolLog",
                    name: "反控日志"
                  },
                  {
                    path: "/qualityControl/yccontrol/remoteControl",
                    name: "远程控制"
                  }
                ]
              },
              // {
              //   name: "质控分析",
              //   img: "./static/images/z_zhikongfenxi_icon.png",
              //   show: false,
              //   children: [
              //     {
              //       path: "/qualityControl/zkstatics/dayexamAnalysis",
              //       name: "日质控考核分析"
              //     },
              //     {
              //       path: "/qualityControl/zkstatics/examAnalysis",
              //       name: "质控考核分析"
              //     },
              //     {
              //       path: "/qualityControl/zkstatics/dataAnalysis",
              //       name: "数据有效性分析"
              //     },
              //     {
              //       path: "/qualityControl/zkstatics/singlemonthStatis",
              //       name: "单站月质控考核分析"
              //     },
              //     {
              //       path: "/qualityControl/zkstatics/monthLedger",
              //       name: "质控月度报表台账"
              //     }
              //   ]
              // }
            ]
          },
          // {
          //   path: "",
          //   name: "动态管控",
          //   icon: "icon-dongtaiguankong",
          //   children: [
          //     {
          //       name: "实时管控",
          //       img: "./static/images/z_shishiguankong_icon.png",
          //       imgActive:
          //         "./static/images/communicationmanagement_link_icon.png",
          //       children: [
          //         {
          //           path: "/dynamiControl/rtControl/alarmManage",
          //           name: "报警管理"
          //         },
          //         {
          //           path: "/dynamiControl/rtControl/realtimeData",
          //           name: "实时数据"
          //         },
          //         {
          //           path: "/dynamiControl/rtControl/realtimeParam",
          //           name: "实时参数"
          //         }
          //       ]
          //     },
          //     {
          //       name: "历史记录",
          //       img: "./static/images/d_lishijilu_icon.png",
          //       children: [
          //         {
          //           path: "/dynamiControl/monitor/historyRecord",
          //           name: "历史记录"
          //         }
          //       ]
          //     },
          //     {
          //       name: "门禁记录",
          //       img: "./static/images/d_mengjingjilu_icon.png",
          //       children: [
          //         {
          //           path: "/dynamiControl/entrance/entraRecord",
          //           name: "门禁记录"
          //         }
          //       ]
          //     },
          //     {
          //       name: "参数设置",
          //       img: "./static/images/d_canshushezi_icon.png",
          //       children: [
          //         {
          //           path: "/dynamiControl/params/paramSet",
          //           name: "参数设置"
          //         }
          //       ]
          //     }
          //   ]
          // },
          // {
          //   path: "",
          //   name: "数据审核",
          //   icon: "icon-shujushenhe",
          //   children: [
          //     {
          //       name: "数据审核",
          //       img: "./static/images/h_shujushenghe_icon.png",
          //       children: [
          //         {
          //           path: "/dataAudit/data/threelevelAudit",
          //           name: "三级审核(总站)"
          //         },
          //         {
          //           path: "/dataAudit/data/auditLog",
          //           name: "审核日志"
          //         }
          //       ]
          //     },
          //     {
          //       name: "审核管理",
          //       img: "./static/images/h_shengheguanli_icon.png",
          //       children: [
          //         {
          //           path: "/dataAudit/audit/auditStatis",
          //           name: "审核情况统计(总站)"
          //         },
          //         {
          //           path: "/dataAudit/audit/doubtdataStatis",
          //           name: "存疑数据统计"
          //         },
          //         {
          //           path: "/dataAudit/audit/invaliddataStatis",
          //           name: "无效数据统计"
          //         }
          //       ]
          //     }
          //   ]
          // },
          // {
          //   path: "",
          //   name: "运行维护",
          //   icon: "icon-yunweiguanli",
          //   children: [
          //     {
          //       name: "远程维护",
          //       img: "./static/images/y_yuanchengweihu_icon.png",

          //       children: [
          //         {
          //           path: "/operaAndmaint/remoteMainte/workSimulation",
          //           name: "现场工况模拟"
          //         },
          //         {
          //           path: "/operaAndmaint/remoteMainte/remoteInspection",
          //           name: "远程巡检"
          //         }
          //       ]
          //     },
          //     {
          //       name: "现场维护",
          //       img: "./static/images/y_xianchangweihu_icon.png",

          //       children: [
          //         {
          //           path: "/operaAndmaint/fieldMaint/stationManage",
          //           name: "停站管理"
          //         },
          //         {
          //           path: "/operaAndmaint/fieldMaint/manageLedger",
          //           name: "运维台账"
          //         },
          //         {
          //           path: "/operaAndmaint/fieldMaint/manageStatis",
          //           name: "运维汇总统计"
          //         }
          //       ]
          //     },
          //     {
          //       name: "申报管理",
          //       img: "./static/images/y_shengbaoguanli_icon.png",

          //       children: [
          //         {
          //           path: "/operaAndmaint/declaraManage/outageDeclara",
          //           name: "停运申报"
          //         }
          //       ]
          //     },
          //     {
          //       name: "信息统计",
          //       img: "./static/images/y_xinxitongji_icon.png",

          //       children: [
          //         {
          //           path: "/operaAndmaint/infoStatis/faultStatis",
          //           name: "运行故障统计"
          //         },
          //         {
          //           path: "/operaAndmaint/infoStatis/qualityAnalysis",
          //           name: "仪器质量分析"
          //         }
          //       ]
          //     },
          //     {
          //       name: "任务管理",
          //       img: "./static/images/y_renwuguanli_icon.png",

          //       children: [
          //         {
          //           path: "/operaAndmaint/task/taskManage",
          //           name: "任务管理"
          //         }
          //       ]
          //     },
          //     {
          //       name: "基础信息",
          //       img: "./static/images/y_jichuxingxi_icon.png",

          //       children: [
          //         {
          //           path: "/operaAndmaint/baseInfo/operationCompany",
          //           name: "运维单位管理"
          //         },
          //         {
          //           path: "/operaAndmaint/baseInfo/operationPerson",
          //           name: "运维人员管理"
          //         },
          //         {
          //           path: "/operaAndmaint/baseInfo/operationVehicle",
          //           name: "运维车辆管理"
          //         }
          //       ]
          //     }
          //   ]
          // },
          // {
          //   path: "",
          //   name: "综合应用",
          //   icon: "icon-zonghefenxi",
          //   children: [
          //     {
          //       name: "数据图表",
          //       img: "./static/images/f_shujutubiao_icon.png",

          //       children: [
          //         {
          //           path: "/colligateApplication/datacanvas/singletrendChange",
          //           name: "断面单参数趋势变化"
          //         },
          //         {
          //           path: "/colligateApplication/datacanvas/multtrendChange",
          //           name: "断面多参数趋势变化"
          //         },
          //         {
          //           path: "/colligateApplication/datacanvas/paramScatterplot",
          //           name: "断面单参数散点图"
          //         },
          //         {
          //           path: "/colligateApplication/datacanvas/paramBlockdiagram",
          //           name: "断面单参数区块图"
          //         },
          //         {
          //           path: "/colligateApplication/datacanvas/trendAnalysis",
          //           name: "同比环比趋势分析"
          //         }
          //       ]
          //     },
          //     {
          //       name: "数据报表",
          //       img: "./static/images/f_shujubaobiao_icon.png",
          //       imgActive:
          //         "./static/images/communicationmanagement_link_icon.png",
          //       children: [
          //         {
          //           path: "/colligateApplication/datatable/scopeStatistics",
          //           name: "水质评价范围统计"
          //         },
          //         {
          //           path:
          //             "/colligateApplication/datatable/waterqualityStatistics",
          //           name: "断面时段水质统计"
          //         },
          //         // {
          //         //   path: "/colligateApplication/datatable/faultStatis",
          //         //   name: "故障情况统计"
          //         // },
          //         {
          //           path: "/colligateApplication/datatable/singleStationReport",
          //           name: "自动站单站报表"
          //         },
          //         {
          //           path: "/colligateApplication/datatable/multiStationReport",
          //           name: "自动站多站报表"
          //         },
          //         // {
          //         //    path: '/colligateApplication/datatable/multiStationPresentation',
          //         //    name: '自动站多站报告',
          //         // },
          //         {
          //           path: "/colligateApplication/datatable/waterQualityBulletin",
          //           name: "地表水水质公报"
          //         }
          //       ]
          //     },
          //     {
          //       name: "综合分析报表",
          //       img: "./static/images/f_zonghebiaobiao_icon.png",

          //       children: [
          //         {
          //           path:
          //             "/colligateApplication/analysisReport/waterQualityEvaluation",
          //           name: "水质评价"
          //         },
          //         {
          //           path:
          //             "/colligateApplication/analysisReport/waterContrastAnalysis",
          //           name: "水质现状对比分析"
          //         },
          //         {
          //           path:
          //             "/colligateApplication/analysisReport/comparisonAnalysisRates",
          //           name: "两率对比分析"
          //         }
          //       ]
          //     },
          //     {
          //       name: "档案管理",
          //       img: "./static/images/f_danganguanli_icon.png",
          //       imgActive:
          //         "./static/images/communicationmanagement_link_icon.png",
          //       children: [
          //         {
          //           path: "/colligateApplication/archivesManage/stationArchives",
          //           name: "一站一档"
          //         },
          //         {
          //           path: "/colligateApplication/archivesManage/personArchives",
          //           name: "一员一档"
          //         }
          //       ]
          //     }
          //   ]
          // },
          // {
          //   path: "/assessment",
          //   name: "考核评估",
          //   icon: "icon-kaohepinggu",
          //   children: [
          //     {
          //       name: "运维公司考核",
          //       img: "./static/images/k_yunweigongshikaohe_icon.png",

          //       children: [
          //         {
          //           path: "/assessment/company/personAssess",
          //           name: "运维人员考核"
          //         },
          //         {
          //           path: "/assessment/company/companyAssess",
          //           name: "分公司考核"
          //         }
          //       ]
          //     },
          //     {
          //       name: "环境监测考核",
          //       img: "./static/images/d_huanjingjiancekaohe_icon.png",

          //       children: [
          //         {
          //           path: "/assessment/monitor/monitorAssess",
          //           name: "环境监测考核"
          //         }
          //       ]
          //     }
          //   ]
          // },
          // {
          //   path: "/knowledgeHouse",
          //   name: "知识库",
          //   icon: "icon-zhishiku"
          // },
          {
            path: "/systemManage",
            name: "系统管理",
            icon: "icon-xitongguanli",
            children: [
              // {
              //   name: "数据字典",
              //   img: "./static/images/x_shujuzidian_icon.png",

              //   children: [
              //     {
              //       path: "/systemManage/dictionary/waterManege",
              //       name: "水系管理"
              //     },
              //     {
              //       path: "/systemManage/dictionary/areaMange",
              //       name: "政区管理"
              //     }
              //   ]
              // },
              // {
              //   name: "系统设置",
              //   img: "./static/images/x_xitongshezhi_icon.png",

              //   children: [
              //     {
              //       path: "/systemManage/sysSet/userManage",
              //       name: "用户管理"
              //     },
              //     {
              //       path: "/systemManage/sysSet/roleManage",
              //       name: "角色管理"
              //     },
              //     {
              //       path: "/systemManage/sysSet/menuManage",
              //       name: "功能菜单管理"
              //     },
              //     {
              //       path: "/systemManage/sysSet/journalManage",
              //       name: "日志管理"
              //     }
              //   ]
              //   },
              {
                name: "基础信息管理",
                img: "./static/images/x_xinxiguanli_icon.png",

                children: [
                  {
                    path: "/systemManage/mesManage/stationManage",
                    name: "测站信息管理"
                  },
                  // {
                  //   path: "/systemManage/mesManage/messageSet",
                  //   name: "监测项目信息设置"
                  // },
                  // {
                  //   path: "/systemManage/mesManage/waterEvaluate",
                  //   name: "水质类别评价标准"
                  // },
                  // {
                  //   path: "/systemManage/mesManage/agreeManage",
                  //   name: "协议管理"
                  // },
                  // {
                  //   path: "/systemManage/mesManage/instrucManage",
                  //   name: "指令管理"
                  // },
                  // {
                  //   path: "/systemManage/mesManage/processManage",
                  //   name: "流程管理"
                  // }
                ]
              }
            ]
          }
          
        ], //所有导航数据
        // levMenudata: [], //二级导航数据
        thrMenudata: [], //三级导航数据
        treeNav: [{ name: "区域" }, { name: "控制级别" }], //树结构菜单导航
        screenType: "area",
        defaultId: [3],
        clearTime: ""
      };
    },
    provide(){
      return{
        globelDelet:this.globelDelet,
        searchTreeData:this.searchTreeData
      }
    },
    created() {
      this.getRoute(this.$route);
      this.getsessionInfo();
      this.searchTreeData()


    },
    mounted() {},
    methods: {
      globelDelet(url,id,callback){
        this.$confirm("是否将选中的数据删除？", "消息提示", {
          type: "warning",
          center: true,
          cancelButtonClass:'noticonsecondBtn',
          confirmButtonClass: "",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }).then(action => {
          this.$http.delete(url,
            {
              params:{
                ids:id
              }
            }
          ).then(res=>{
            if(res.data.code == 0){
              this.$message({
                message: '删除成功',
                type: 'success',
                duration:700,
              });
              if(callback){
                callback();
              }

            }


          })

        }).catch(function() {});
      },
      styleFun(img) {
        return {
          "background-image": "url(" + img + ")"
        };
      },
      //获取session数据
      getsessionInfo() {
        if (sessionStorage.getItem("treeNavindex")) {
          this.treeNavindex = JSON.parse(sessionStorage.getItem("treeNavindex"));
        }
        if (this.$route.meta.haveTree == "have") {
          if (sessionStorage.getItem("allStatus")) {
            this.allStatus = sessionStorage.getItem("allStatus");
          }
          if (sessionStorage.getItem("detailTree") == "false") {
            this.detailTree = false;
          } else if (sessionStorage.getItem("detailTree") == "true") {
            this.detailTree = true;
          }
          if (sessionStorage.getItem("opentreeshow") == "false") {
            this.opentreeshow = false;
          } else if (sessionStorage.getItem("opentreeshow") == "true") {
            this.opentreeshow = true;
          }
        } else if (this.$route.meta.haveTree == "haveHidden") {
          if (sessionStorage.getItem("allStatusA")) {
            this.allStatus = sessionStorage.getItem("allStatusA");
          }
          if (sessionStorage.getItem("detailTreeA") == "false") {
            this.detailTree = false;
          } else if (sessionStorage.getItem("detailTreeA") == "true") {
            this.detailTree = true;
          }
          if (sessionStorage.getItem("opentreeshowA") == "false") {
            this.opentreeshow = false;
          } else if (sessionStorage.getItem("opentreeshowA") == "true") {
            this.opentreeshow = true;
          }
        };
        if (sessionStorage.getItem("showCheckbox") == "false") {
          this.showCheckbox = false;
        } else if (sessionStorage.getItem("showCheckbox") == "true") {
          this.showCheckbox = true;
        }
      },
      //树节点筛选
      filterNode(value, data) {
        if (!value) return true;
        return data.nodeName.indexOf(value) !== -1;
      },
      //树结构导航点击
      treeNavclick(item, key) {
        this.treeNavindex = key;
        sessionStorage.setItem("treeNavindex", key);
        if (item.name == "区域") {
          this.filter = "";
          this.screenType='area';
          this.searchTreeData()

        } else if (item.name == "流域") {
          this.filter = "";
          this.screenType='basinn';
          this.searchTreeData()

        }else if(item.name == '自定义'){
          this.screenType='custom';
          this.searchTreeData()
        }else if(item.name == '控制级别'){
          this.screenType='control';
          this.searchTreeData()
        }
      },
      //站点左切换
      stationLeft() {
        if (this.stationCode == 0) {
          return false;
        }
        this.stationCode--;
        this.staionPos = this.stationCode * 34;
      },
      //站点右切换
      stationRight() {
        if (this.stationCode > this.$store.state.stationInfo.length - 2) {
          return false;
        }
        this.stationCode++;
        this.staionPos = this.stationCode * 34;
      },
      //关闭树
      closeTree() {
        //  this.detailTree = false;
        //  this.allStatus='statusC';
        this.detailTree = false;

        if (this.haveTree == "have") {
          this.allStatus = "statusA";
          sessionStorage.setItem("allStatus", "statusA");
          sessionStorage.setItem("detailTree", false);
        } else if (this.haveTree == "haveHidden") {
          this.allStatus = "statusB";
          sessionStorage.setItem("allStatusA", "statusB");
          this.opentreeshow = true;
          sessionStorage.setItem("opentreeshowA", true);
          sessionStorage.setItem("detailTreeA", false);
        } else {
          this.allStatus = "statusB";
          sessionStorage.setItem("allStatusA", "statusB");
          sessionStorage.setItem("detailTree", false);
        }
      },
      //开启树
      openTree() {
        this.detailTree = true;
        this.allStatus = "statusC";
        this.opentreeshow = false;
        sessionStorage.setItem("detailTreeA", true);
        sessionStorage.setItem("allStatusA", "statusC");
        sessionStorage.setItem("opentreeshowA", false);
      },
      openMidtree() {
        this.detailTree = true;
        this.allStatus = "statusC";
        sessionStorage.setItem("detailTree", true);
        sessionStorage.setItem("allStatus", "statusC");
        this.staionPos = 0;
        this.stationCode = 0;
      },
      //树单选
      treeNodeclick(data) {
        if (data.structureType == '3') {
          this.$store.commit("setStationinfo", data);
          this.$store.commit("setisChange",'false');
        }
      },
      //树多选
      treeCheckchange() {
        var nodes = this.$refs.checkedTree.getCheckedNodes();
        var data = [];
        for (let i in nodes) {
          if (nodes[i].structureType == '3') {
            data.push(nodes[i]);
          }
        };
        this.$store.commit("setisChange",'false');
        this.$store.commit("setStationinfo", data);
      },
      //一级导航点击
      menulistClick(item, key) {

        this.$store.commit("setMenuIndex", key);
        this.$store.commit("setNavTitle", item.name);
        this.$store.commit("setLevmenuIndex", 0);
        if (item.name == "GIS一张图" || item.name == "知识库") {

          this.$store.commit("setLevMenudata",[]);
          this.$router.push(item.path);
          return false;
        }
        this.$store.commit("setLevMenudata", item.children);
        if (item.children[0].children[0].path) {
          this.$store.commit("setChildMenu", item.children[0].children[0].path);
          this.$router.push(item.children[0].children[0].path);
        }
      },
      //二级导航点击
      goRouter(item, key) {
        this.$store.commit("setLevmenuIndex", key);
        if (item.children && item.children.length > 0) {
          this.$router.push(item.children[0].path);
          this.$store.commit("setChildMenu", item.children[0].path);
        }
        //this.$router.push(item.path);
      },
      //三级导航点击
      goChildrouter(item) {
        this.$store.commit("setChildMenu", item.path);
        this.$store.commit("setLevmenuIndex", this.menuCode);
        this.$router.push(item.path);
        this.menushow = false;
      },
      mouseLeave(event) {
        //谷歌浏览器下点击事件会触发鼠标移出事件bug解决
        if (event.relatedTarget != null) {
          this.menushow = false;
          clearTimeout(this.clearTime);
        }
      },
      //鼠标经过2级菜单时更换3级菜单数据
      levmenuHover(item, key) {

        this.clearTime = setTimeout(() => {
          this.menushow = true;
          this.menuCode = key;
          this.thrMenudata = item;
        }, 200);
      },
      menuOut() {
        clearTimeout(this.clearTime);
      },
      //获取当前路由
      getRoute(params) {
        if (this.$route.meta.haveTree == "not") {
          this.haveTree = "not";
          this.allStatus = "statusB";
          this.opentreeshow = false;
        } else if (this.$route.meta.haveTree == "have") {
          this.haveTree = "have";
          this.allStatus = "statusA";
          this.opentreeshow = false;
        } else if (this.$route.meta.haveTree == "haveHidden") {
          this.haveTree = "haveHidden";
          this.allStatus = "statusB";
          this.opentreeshow = true;
        }
        if (params.name == "企业详情") {
          var list = params.matched;
          for (let i in list) {
            if (i > 0 && list[i].name != "企业详情") {
              this.tabNavone.push({
                name: list[i].name,
                path: list[i].path
              });
            }
          }

          this.tabNavone.push({
            name: "运维单位管理",
            path: "/operaAndmaint/baseInfo/operationCompany"
          });
          this.tabNavone.push({ name: params.query.name, path: "" });
        } else if (params.name == "任务管理(副本)") {
          var list = params.matched;
          for (let i in list) {
            if (i > 0 && list[i].name != "任务管理(副本)") {
              this.tabNavone.push({
                name: list[i].name,
                path: list[i].path
              });
            }
          }
        } else if (params.meta.tapCode) {
          var list = params.matched;
          for (let i in list) {
            if (
              i > 0 &&
              list[i].name != "任务管理(副本)" &&
              i != list.length - 1
            ) {
              this.tabNavone.push({
                name: list[i].name,
                path: list[i].path
              });
            }
          }
        } else {
          var list = params.matched;
          for (let i in list) {
            if (i > 0) {
              this.tabNavone.push({
                name: list[i].name,
                path: list[i].path
              });
            }
          }
        }
      },
      //设置树的状态
      setTreestatus() {
        if (this.$route.meta.singleSelect) {
          this.showCheckbox = true;
          this.filter = "";
          sessionStorage.setItem("showCheckbox", true);
          this.defaultId = [];
          this.staionPos = 0;

          this.stationCode = 0;
          this.$nextTick(() => {
            if (this.$refs.tree && this.$store.state.stationInfo.length > 0) {
              //单选树默认选择vuex存储的第一个数据
              this.$refs.tree.setCurrentKey(this.$store.state.stationInfo[0]);
              this.defaultId.push(this.$store.state.stationInfo[0].nodeId);
              this.$store.commit("setStationinfo",this.$store.state.stationInfo[0]);
              this.$store.commit("setisChange",'false');
            } else {
              //根据树数据状态,默认选中第三级或者第二级数据
              if (this.treeData[0].children[0].children[0]) {
                this.$store.commit("setStationinfo",this.treeData[0].children[0].children[0]);
                this.$store.commit("setisChange",'false');
              } else {
                this.$store.commit("setStationinfo",this.treeData[0].children[0]);
                this.$store.commit("setisChange",'false');
              }
            }
          });
        } else {
          this.showCheckbox = false;
          sessionStorage.setItem("showCheckbox", false);
          this.filter = "";
          this.defaultId = [];
          this.staionPos = 0;
          this.stationCode = 0;
          this.$nextTick(() => {
            if (this.$refs.checkedTree) {
              let checkArr = this.treeData;
              let arr = [];
              let station = "";
              for (let i in checkArr) {
                arr.push(checkArr[i].nodeId);
              }
              this.$refs.checkedTree.setCheckedKeys(arr);
              this.defaultId = arr;
              let checkedNode = this.$refs.checkedTree.getCheckedNodes();
              let setNode = [];
              for (let i in checkedNode) {
                if (checkedNode[i].structureType == '3') {
                  setNode.push(checkedNode[i]);
                }
              }
              this.$store.commit("setStationinfo", setNode);
              this.$store.commit("setisChange",'false');
            }
          });
        }
      },
      //获取树结构
      searchTreeData() {
        /* 基本信息请求 */
        this.$http
          .get("/SiteManagement/station/queryTree", {
            params: {
              keyName: '',
              typeCode:'',
              isUsedString:'',
              isMonitoring:'',
              basinnOrAreaOrCustom:this.screenType,
              groupName:'',
              groupStations:'',
            }
          })
          .then(response => {
            let dataJson = response.data;
            if (dataJson.code === 0 && dataJson.content.dataList != null) {
              this.treeData = dataJson.content.dataList;
              this.setTreestatus();
            }else{
              this.treeData=[];
            }
          })
          .catch(error => {});
      }
    },
    computed: {
      stationNames: {
        get: function() {

          let str = "";
          for (let i in this.$store.state.stationInfo) {
            str += this.$store.state.stationInfo[i].nodeName + ",";
          }
          str = str.substring(0, str.length - 1);
          return str;
        },

      },
      stationName: {
        get: function() {
          if (this.$store.state.stationInfo.length > 0) {
            return this.$store.state.stationInfo[0].nodeName;
          } else {
            return "";
          }
        },

      },
      stationNum: {
        get: function() {
          return this.$store.state.stationInfo.length;
        }
      },
      stationInfo:{
        get: function () {
          return this.$store.state.stationInfo;
        },
      }
    },
    watch: {
      $route(to, from) {
        this.tabNavone = [];
        this.getRoute(to);

        //路由切换时控制树结构的按钮显示隐藏
        this.detailTree = false;
        if (this.$route.meta.haveTree == "not") {
          this.haveTree = "not";
          this.allStatus = "statusB";
          this.opentreeshow = false;
        } else if (this.$route.meta.haveTree == "have") {
          this.haveTree = "have";
          this.allStatus = "statusA";
          this.opentreeshow = false;
          if (sessionStorage.getItem("allStatus")) {
            this.allStatus = sessionStorage.getItem("allStatus");
          }
          if (sessionStorage.getItem("detailTree") == "false") {
            this.detailTree = false;
          } else if (sessionStorage.getItem("detailTree") == "true") {
            this.detailTree = true;
          }
          if (sessionStorage.getItem("opentreeshow") == "false") {
            this.opentreeshow = false;
          } else if (sessionStorage.getItem("opentreeshow") == "true") {
            this.opentreeshow = true;
          }
        } else if (this.$route.meta.haveTree == "haveHidden") {
          this.haveTree = "haveHidden";
          this.allStatus = "statusB";
          this.opentreeshow = true;
          if (sessionStorage.getItem("allStatusA")) {
            this.allStatus = sessionStorage.getItem("allStatusA");
          }
          if (sessionStorage.getItem("detailTreeA") == "false") {
            this.detailTree = false;
          } else if (sessionStorage.getItem("detailTreeA") == "true") {
            this.detailTree = true;
          }
          if (sessionStorage.getItem("opentreeshowA") == "false") {
            this.opentreeshow = false;
          } else if (sessionStorage.getItem("opentreeshowA") == "true") {
            this.opentreeshow = true;
          }
        }
        this.setTreestatus();
      },
      filter(val) {
        this.$refs.tree.filter(val);
        this.$refs.checkedTree.filter(val);
      },
      stationInfo:function(newValue,oldValue){

        if(this.$store.state.isChange == 'true'){
          this.filter=newValue[0].nodeName
        }

      }
    }
  };
</script>
<style scoped lang="less">
  .homePage {
    height: 100%;
    .rcs-content-head {
      height: 66px;
      width: 100%;
      background: url("../../assets/images/header_bg.png") no-repeat;
      background-size: 100% 100%;
      .badgeBox {
        width: 70px;
        float: left;
        height: 66px;
        line-height: 66px;
        > span {
          font-size: 16px;
          color: #fff;
          position: relative;
          margin-right: 12px;
          vertical-align: middle;
          cursor: pointer;
          &:first-child {
            vertical-align: -5px;
          }
          > i {
            position: absolute;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            border-radius: 50%;
            background: #ff8e2f;
            color: #fff;
            font-size: 12px;
            font-style: normal;
            top: -5px;
            right: -5px;
          }
        }
      }
      .page-loge-bg {
        width: 404px;
        height: 100%;
        float: left;
        margin-left: 11px;
        background: url("../../assets/images/logo.png") center center no-repeat;
      }
      .rcs-content-nav {
        width: calc(100% - 610px);
        height: 100%;
        float: left;
        text-align: center;
        .nav-router-list {
          height: 100%;
          overflow: hidden;
          white-space: nowrap;
          li {
            width: 100px;
            height: 66px;
            display: inline-block;
            cursor: pointer;
            position: relative;

            /*&:after{*/
            /*content: '';*/
            /*display: inline-block;*/
            /*position: absolute;*/
            /*bottom: 0;*/
            /*height: 5px;*/
            /*left: 50%;*/
            /*width: 0;*/
            /*background-color: #fff;*/
            /*transition: all linear .2s;*/
            /*}*/
            i {
              display: block;
              text-align: center;
              font-size: 26px;
              color: #fff;
              margin-top: 8px;
              transition: all 0.1s;
            }
            span {
              display: block;
              height: 20px;
              line-height: 20px;
              font-size: 13px;
              color: #fff;
              margin-top: 2px;
              font-weight: bold;
              text-align: center;
              transition: all 0.1s;
            }
            &:hover {
              i {
                transform: translateY(-2px);
              }
              span {
                transform: translateY(2px);
              }
            }
            &.active {
              background: url("../../assets/images/bg_nav_Select.png");
              background-size:100% 100%;
              &:hover {
                i {
                  transform: translateY(0);
                }
                span {
                  transform: translateY(0);
                }
              }
              /*&:after{*/
              /*width: 100%;*/
              /*left: 0;*/
              /*}*/
            }
          }
        }
      }
      .page-user-info {
        width: auto;
        height: 100%;
        float: right;
        .message-reminding {
          float: left;
          color: #fff;
          font-size: 12px;
          line-height: 24px;
          margin-top: 22px;
          position: relative;
          cursor: pointer;
          i {
            font-size: 20px;
            display: inline-block;
            vertical-align: top;
          }
        }
        .message-reminding:hover {
          opacity: 0.8;
        }
        .user-info-wrap {
          float: left;
          margin-left: -20px;
          margin-top: 16px;
          padding-right: 20px;
          position: relative;
          /*background: url("../assets/images/index/small-triangle-icon.png") no-repeat right center;*/
          cursor: pointer;
          .head-portrait-wrap {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid #fff;
            float: left;
            margin-right: 9px;
            background: #6a7682;
            overflow: hidden;
            img {
              min-width: 100%;
              min-height: 100%;
            }
          }
          .user-base-info {
            float: left;
            line-height: 16px;
            padding-top: 2px;
            span.user-name {
              display: block;
              color: #fff;
              font-size: 16px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            span.user-position {
              font-size: 12px;
              color: #b0daf7;
            }
          }
          .closeBox {
            position: absolute;
            width: 135px;
            top: 51px;
            z-index: 1200;
            border: 1px solid #166bce;
            box-shadow: 0px 0px 5px #166bce;
            right: 0;
            text-align: center;
            background: #fff;
            p {
              text-align: center;
              height: 30px;
              line-height: 30px;
              cursor: pointer;
              color: #166bce;
              &:hover {
                background: #dce9f8;
              }
            }
          }
        }
      }
    }
    section {
      height: calc(100% - 66px);
      position: relative;
      .navBox {
        box-sizing: border-box;
        width: 73px;
        text-align: center;
        height: 100%;
        border-right: 1px solid #dfe3f2;
        position: absolute;
        left: 0px;
        top: 0px;
        .oneLevnav {
          position: relative;
          box-sizing: border-box;
          height: 100%;
          background: url("../../assets/images/nav/bg_a.png") no-repeat center
          center;
          background-size: 100% 100%;
          > p {
            height: 30px;
            line-height: 30px;
            width: 100%;
            position: relative;
            margin-bottom: 8px;
            border-bottom: 1px solid #dfe3f2;
            > span {
              position: absolute;
              width: 6px;
              height: 6px;
              top: 1px;
            }
            &:after,
            &:before {
              content: "";
              position: absolute;
              width: 6px;
              height: 6px;
              bottom: 1px;
            }
            &:after {
              background: url("../../assets/images/jiao_c.png") center center
              no-repeat;
              right: 1px;
            }
            &:before {
              background: url("../../assets/images/jiao_d.png") center center
              no-repeat;
              left: 1px;
            }
            .tl {
              background: url("../../assets/images/jiao_a.png") center center
              no-repeat;
              left: 1px;
            }
            .tr {
              background: url("../../assets/images/jiao_b.png") center center
              no-repeat;
              right: 1px;
            }
          }
          .menu {
            height: 73px;
            height: 80px;
            padding-top: 13px;
            margin: 0 2px;

            cursor: pointer;
            &:hover {
              > i {
                background-position: 0px -64px;
              }
            }
            > i {
              font-size: 26px;
              display: inline-block;
              width: 34px;
              height: 34px;
              background-position: 0px 0px;
            }
            > p {
              font-size: 12px;
              font-weight: 700;
              margin-top: 4px;
              color: #6c7680;
              width: 70px;
              height: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .levmenuActive {
            border-bottom: 2px solid #166bce;
            background: #e5f2ff;
            &:hover {
              > i {
                background-position: 0px -128px;
              }
            }
            > i {
              background-position: 0px -128px;
            }
            > p {
              color: #1a1a1a;
            }
          }
          .menu-dropright {
            width: 0px;
            //display: none;
            transition: width 0.3s;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 71px;
            background: url("../../assets/images/nav/bg_b.png") no-repeat center
            center;
            background-size: 100% 100%;
            background-color: #fff;

            z-index: 9999;
            overflow: hidden;
            .titlebox {
              height: 50px;
              line-height: 50px;
              padding-left: 12px;
              text-align: left;
              font-size: 16px;
              color: #7d8894;
              border-bottom: 1px solid #dfe3f2;
            }
            .twoLevnav {
              width: calc(100% - 17px);
              .twoTitle {
                height: 40px;
                line-height: 40px;
                text-align: left;
                padding-left: 25px;
                font-size: 13px;
                font-weight: 700;
                color: #1a1a1a;
                border-bottom: 1px solid #dfe3f2;
                position: relative;
                cursor: pointer;
                &::before {
                  content: "";
                  width: 5px;
                  height: 5px;
                  border-radius: 50%;
                  background: #c3d0d6;
                  position: absolute;
                  left: 12px;
                  top: 50%;
                  transform: translateY(-2.5px);
                }
                i {
                  position: absolute;
                  right: 16px;
                  font-size: 14px;
                  top: 13px;
                  transition: transform 0.3s;
                }
                .rotateClass {
                  transform: rotate(180deg);
                }
              }
              ul {
                border-bottom: 1px solid #dfe3f2;
                li {
                  height: 36px;
                  line-height: 36px;
                  overflow: hidden;
                  cursor: pointer;
                  padding-left: 42px;
                  text-align: left;
                  position: relative;
                  &:before {
                    width: 1px;
                    height: 30px;
                    background: #cad8de;
                    content: "";
                    position: absolute;
                    top: -14px;
                    left: 26px;
                  }
                  &:after {
                    width: 1px;
                    height: 30px;
                    background: #cad8de;
                    content: "";
                    position: absolute;
                    top: 20px;
                    left: 26px;
                  }
                  &:hover {
                    background-color: #e5f2ff;
                    color: #166bce;
                  }
                  > span {
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background: #fff;
                    border: 1px solid #cad8de;
                    position: absolute;
                    left: 24px;
                    top: 50%;
                    transform: translateY(-2.5px);
                  }
                  &:first-child {
                    &:before {
                      display: none;
                    }
                  }
                  &:last-child {
                    &:after {
                      display: none;
                    }
                  }
                }
                .currentLi {
                  background-color: #e5f2ff;
                  color: #166bce;
                  border-left: 2px solid #166bce;
                  &:before,
                  &:after {
                    left: 24px;
                  }
                  > span {
                    width: 9px;
                    height: 9px;
                    border: 1px solid #166bce;
                    left: 20px;
                    top: 50%;
                    background: #e5f2ff;
                    transform: translateY(-4.5px);
                    z-index: 9;
                    &:after {
                      content: "";
                      width: 3px;
                      height: 3px;
                      border-radius: 50%;
                      background: #166bce;
                      border: 1px solid #166bce;
                      position: absolute;
                      left: 1px;
                      top: 1px;
                    }
                  }
                }
              }
            }
          }
          .showMenu {
            width: 191px;
            display: block;
            border-right: 1px solid #cad9eb;
            border-left: 1px solid #dfe3f2;
          }
          .openTree {
            width: 30px;
            height: 83px;
            color: #fff;
            background: url("../../assets/images/openTree.png") no-repeat center
            center;
            background-size: 100% 100%;
            position: absolute;
            right: 0px;
            top: 50%;
            cursor: pointer;
            transform: translateY(-41.5px);
            &:hover {
              background: url("../../assets/images/hover_openTree.png") no-repeat
              center center;
              background-size: 100% 100%;
            }
            p {
              width: 13px;
              height: 83px;
              font-size: 12px;
              position: absolute;
              right: 5px;
              top: 5px;
            }
            i {
              width: 3px;
              height: 8px;
              position: absolute;
              left: 5px;
              top: 50%;
              transform: translateY(-4px);
              background: url("../../assets/images/righticon.png") center center
              no-repeat;
            }
          }
        }
      }
      .leftTree_box {
        width: 210px;
        height: 100%;
        border-right: 1px solid #e5e5e5;
        position: absolute;
        left: 0px;
        top: 0px;
      }
      .rightContent_box {
        height: 100%;
        width: calc(100% - 73px);
        position: absolute;
        left: 73px;
        top: 0px;
        .rightBody {
          height: calc(100% - 30px);
          position: relative;
          padding: 6px;
          background: #eff3f5;
        }
        .fullHeight {
          height: 100% !important;
        }
        .curAddre {
          height: 30px;
          line-height: 30px;
          color: #666666;
          font-size: 13px;
          padding-left: 17px;
          border-bottom: 1px solid #dfe3f2;
          i {
            font-size: 14px;
          }
          span:last-child {
            color: #1a1a1a;
          }
          > div {
            display: inline-block;
            color: #1a1a1a;
          }
        }
        .treeBox {
          width: 204px;
          height: calc(100% - 12px);
          border: 1px solid #dce9fa;
          position: absolute;
          left: 6px;
          top: 6px;
          background: #ebf1f7;
          .closeBtn {
            width: 6px;
            height: 44px;
            background: url("../../assets/images/shuClose.png") center center
            no-repeat;
            position: absolute;
            top: 50%;
            transform: translateY(-3px);
            right: -6px;
            cursor: pointer;
            &:hover {
              background: url("../../assets/images/hover_shuClose.png") center
              center no-repeat;
            }
            i {
              width: 3px;
              height: 8px;
              position: absolute;
              left: 2px;
              top: 50%;
              transform: translateY(-4px);
              background: url("../../assets/images/righticon.png") center center
              no-repeat;
            }
          }
          .treebody {
            background: #fff;
            width: 100%;
            height: calc(100% - 3px);
            .treeTool {
              border-bottom: 1px solid #dfe3f2;
              height: 34px;
              padding: 3px;
              > span {
                display: inline-block;
                height: 25px;
                width: 28px;
                text-align: center;
                line-height: 28px;
                color: #7b8fa4;
                cursor: pointer;
                font-weight: 700;
                vertical-align: -2px;
              }
            }
            .treenav {
              li {
                float: left;
                height: 28px;
                width: 50%;
                line-height: 28px;
                text-align: center;
                cursor: pointer;
                color: #666;
                background: #ebf1f7;
                border-right: 1px solid #dce9fa;
                border-bottom: 1px solid #dce9fa;
                &:last-child {
                  border-right: 0px;
                }
              }
              .current {
                color: #166bce;
                background: #fff;
                border-bottom: 0px;
                font-weight: 700;
              }
            }
            .tree_content {
              height: calc(100% - 52px);
            }
          }
        }
        .briefBox {
          width: 63px;
          height: calc(100% - 12px);
          border: 1px solid #dce9fa;
          position: absolute;
          left: 6px;
          top: 6px;
          background: #fff;

          padding: 4px;
          .inputbox {
            position: relative;
            margin-bottom: 15px;
            cursor: pointer;
            input {
              width: 50px;
              height: 25px;
              border-radius: 25px;
              border: 1px solid #c6d1de;
              outline: none;
            }
            i {
              font-size: 16px;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-8px, -8px);
              color: #c6d1de;
            }
          }
          > p {
            height: 28px;
            font-size: 13px;
            color: #666666;
          }
          .ulbox {
            height: 248px;
            text-align: center;
            margin-bottom: 15px;
            position: relative;
            > i {
              font-size: 12px;
              color: #166bce;
              cursor: pointer;
              position: absolute;
              top: 90px;
            }
            .icon-lefticon {
              left: 0px;
            }
            .icon-righticon {
              right: 0px;
            }
            .gdbox {
              display: inline-block;
              width: 34px;
              height: 205px;
              position: relative;
              overflow: hidden;
              ul {
                height: 205px;
                position: absolute;
                left: 0px;
                top: 0px;
                width: 10000px;
                transition: all 0.5s;
                li {
                  width: 34px;
                  padding: 2px 10px;
                  padding-top: 5px;
                  height: 205px;
                  font-size: 13px;

                  background: url("../../assets/images/jiao_j.png") center center
                  no-repeat;
                  color: #fff;
                  float: left;
                  text-align: center;
                }
              }
            }
          }
          .stationdetail {
            font-size: 12px;
            color: #666;
            text-align: center;
            padding: 10px 0px;
            position: relative;
            > span {
              position: absolute;
              width: 6px;
              height: 6px;
              top: 0px;
            }
            &:after,
            &:before {
              content: "";
              position: absolute;
              width: 6px;
              height: 6px;
              bottom: 0px;
            }
            &:after {
              background: url("../../assets/images/jiao_f.png") center center
              no-repeat;
              right: 0px;
            }
            &:before {
              background: url("../../assets/images/jiao_h.png") center center
              no-repeat;
              left: 0px;
            }
            .tl {
              background: url("../../assets/images/jiao_e.png") center center
              no-repeat;
              left: 0px;
            }
            .tr {
              background: url("../../assets/images/jiao_g.png") center center
              no-repeat;
              right: 0px;
            }
            li {
              margin-bottom: 10px;
              &:last-child {
                margin: 0px;
              }
              p {
                height: 20px;
              }
            }
          }
          .closeBtn {
            width: 6px;
            height: 44px;
            background: url("../../assets/images/shuClose.png") center center
            no-repeat;
            position: absolute;
            top: 50%;
            transform: translateY(-3px);
            right: -6px;
            cursor: pointer;
            &:hover {
              background: url("../../assets/images/hover_shuClose.png") center
              center no-repeat;
            }
            i {
              width: 3px;
              height: 8px;
              position: absolute;
              left: 2px;
              top: 50%;
              transform: translateY(-4px);
              background: url("../../assets/images/righticon.png") center center
              no-repeat;
            }
          }
        }
        .mainbox {
          height: calc(100% - 12px);
          //  border: 1px solid #dce9fa;
          width: calc(100% - 222px);
          position: absolute;
          background: #fff;
          left: 216px;
          top: 6px;
          transition: all 0.3s;
        }
      }
      .fillFull {
        width: 100%;
        left: 0px;
      }
      .fullFull {
        width: calc(100% - 12px) !important;
        left: 6px !important;
      }
      .midFull {
        width: calc(100% - 83px) !important;
        left: 78px !important;
      }
    }
  }
 
</style>
